<template>
    <div class="bottom">
        <div class="icon-1">
          <van-icon name="wap-nav" size="20px" @click="trigger" color="#fff"></van-icon>
          <div class="icon-1-red" @click="trigger">更多</div>
        </div>
        <div @click="gotoInvite">
            <div class="share-button">
                <div class="share-icon"></div>
                邀请码
            </div>
        </div>
        <div class="click-get" @click="startBet" v-if="currentRouteName === 'packageDetail'">
          点击抽奖
        </div>
        <div class="circle">
            <div class="rotate" v-if="currentRouteName !== 'packageDetail'">
                <router-link to="/packages">
                    <img src="../assets/images/common.png" alt="">
                </router-link>
            </div>
            <div class="rotate active" @click="startBet" v-else>
                <img src="../assets/images/bet.png" v-if="!loading" alt="">
                <img src="../assets/images/bet_gray.png" v-else alt="">
            </div>
        </div>

        <van-popup v-model="show" position="left" :overlay="true">
            <div class="sidebar">
                <div class="g_header_title"></div>
                <div class="sidebar_items">
                    <router-link class="sidebar_item" to="/">
                        <div @click="trigger">
                            <div class="icon home"></div>
                            <span class="router-name">主页</span></div>
                    </router-link>
                    <router-link class="sidebar_item" to="/packages">
                        <div @click="trigger">
                            <div class="icon cart"></div>
                            <span class="router-name">游戏礼包</span></div>
                    </router-link>
                    <router-link class="sidebar_item" v-if="isLogined" to="/personal">
                        <div @click="trigger">
                            <div class="icon personal"></div>
                            <span>个人中心</span></div>
                    </router-link>

                    <!-- 引流 -->
                    <div class="sidebar_item" v-if="isLogined" to="/">
                        <div @click="triggerTest('云挂卡')">
                            <div class="icon cards"></div>
                            <span>云挂卡</span>
                        </div>
                    </div>
                    <div class="sidebar_item" v-if="isLogined">
                        <div @click="triggerTest('云激活')">
                            <div class="icon activate"></div>
                            <span>云激活</span></div>
                    </div>
                    <div class="sidebar_item" v-if="!isLogined" to="/personal">
                        <div @click="login">
                            <div class="icon personal"></div>
                            <span>登录/注册</span></div>
                    </div>
                    <div class="sidebar_item" v-if="isLogined">
                        <div @click="logout">
                            <div class="icon loginout"></div>
                            <span>登出</span></div>
                    </div>
                </div>
                <div class="contact">
                  <div class="gongzhonghao">
                    微信公众号: 蒸汽小兔
                  </div>
                  <div class="qqqun">
                    QQ群: 967700061
                  </div>
                  <div class="contacht-item-im">
                    加群及关注公众号更多游戏相送~
                  </div>
                </div>
            </div>
        </van-popup>
        <!--提示弹窗-->
        <div class="wrapper" v-if="!showWrapper" @click="knowWrapper">
            <img class="wrapper-img" src="../assets/images/arrow.png">
        </div>
    </div>
</template>

<script>
import { loginStatus, logout } from "@/apis/apis";
import { mapState } from "vuex";
import bus from "@/utils/bus";
import throttle from "lodash/throttle";
import { setTimeout } from "timers";

export default {
  data() {
    return {
      show: false,
      loading: false,
      showWrapper: localStorage.getItem("isNew")
    };
  },

  methods: {
    gotoInvite() {
      if (!this.isLogined) {
        this.$toast({
          message: "登录后查看您的邀请码",
          position: "bottom"
        });
        return bus.$emit("show_login_dialog");
      }
      this.$router.push("invite");
    },
    knowWrapper() {
      this.showWrapper = true;
      bus.$emit("close_zhishi");
      window.localStorage.setItem("isNew", 1);
    },
    triggerTest(val) {
      this.show = !this.show;
      this.$toast(val + "正在内测中,可在qq群中抽取内测资格");
    },
    trigger() {
      this.show = !this.show;
      setTimeout(() => {
        const btn1 = document.querySelector(".gongzhonghao");
        const btn2 = document.querySelector(".qqqun");
        const _this = this;
        btn1.addEventListener("click", () => {
          const input = document.createElement("input");
          document.body.appendChild(input);
          input.setAttribute("value", "蒸汽小兔");
          input.select();
          if (document.execCommand("copy")) {
            document.execCommand("copy");
            _this.$toast({
              message: "复制公众号成功",
              position: "bottom"
            });
          }
          document.body.removeChild(input);
        });
        btn2.addEventListener("click", () => {
          const input = document.createElement("input");
          document.body.appendChild(input);
          input.setAttribute("value", "967700061");
          input.select();
          if (document.execCommand("copy")) {
            document.execCommand("copy");
            _this.$toast({
              message: "复制QQ号成功",
              position: "bottom"
            });
          }
          document.body.removeChild(input);
        });
      }, 50);
    },
    startBet: throttle(function() {
      if (!this.isLogined) {
        return bus.$emit("show_login_dialog");
      }
      if (this.loading) return;
      this.loading = true;
      bus.$emit("bet");
    }, 1500),
    login() {
      bus.$emit("show_login_dialog");
      this.trigger();
    },
    logout() {
      logout()
        .then(res => {
          if (res._status === 0) {
            this.$toast("登出成功");
            this.trigger();
            this.$store.commit("mutateLoginStatus", false);
            setTimeout(() => {
              window.location.reload();
              this.$router.push("/");
            }, 0);
          } else {
            this.$toast("登出失败");
          }
        })
        .catch(() => {
          this.$toast("网络错误");
        });
    }
  },
  computed: {
    ...mapState(["isLogined"]),
    currentRouteName() {
      return this.$route.name;
    }
  },
  mounted() {
    // if (this.showWrapper) {
    //   console.log(1)
    //   bus.$emit("close_zhishi");
    // }
    bus.$on("bet_finish", () => {
      setTimeout(() => {
        this.loading = false;
      }, 0);
    });
  }
};
</script>


<style lang="scss" scoped>
@import "@/style/var.scss";
.qqqun {
  margin-top: 5px;
}

.gongzhonghao {
  margin-top: 5px;
}

.contacht-item-im {
  margin-top: 10px;
  bottom: 30px;
  font-size: 14px;
  color: #f96868;
}

.contacht-item {
  margin-top: 5px;
}

.contact {
  position: absolute;
  bottom: 30px;
  color: #ccc;
  left: 20px;
}
.g_header_title {
  background: #000;
  height: 60px;
  font-weight: 500;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
  padding: 0 10px;
}

.share-icon {
  background-image: url("../assets/images/share.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
}

.wrapper {
  position: fixed;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.wrapper-img {
  width: 100px;
  height: 100px;
  left: calc(50% - 20px);
  bottom: 110px;
  position: fixed;
}

.share-button {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  border: 2px #ccc solid;
  align-items: center;
  width: 85px;
  height: 30px;
  background-color: #f44;
  border-radius: 5px;
  font-size: 11px;
  color: #ffffff;
  font-weight: 900;
}

.bottom {
  position: fixed;
  bottom: 0;
  height: 70px;
  width: 100%;
  max-width: 500px;
  padding: 0px 15px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: $bottom_background_color;
}

.icon-1 {
  text-align: center;
}

.icon-1-red {
  font-size: 13px;
  font-weight: 555;
  color: #fff;
}
.van-popup {
  width: 62%;
  height: 1000%;
}

.click-get {
  position: absolute;
  left: 50%;
  top: 33px;
  text-align: center;
  transform: translateX(-50%);
  border: 3px #222 solid;
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 13px;
  background-color: #ffc220;
}
.circle {
  position: absolute;
  left: 50%;
  top: -30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  transform: translateX(-50%);
  background-color: $common_background_color;

  .rotate {
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: #ffc220;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      img {
        animation: rotate 10s infinite linear;
      }
    }

    img {
      height: 28px;
      width: 28px;
    }
  }
}

.sidebar {
  height: 100%;
  width: 100%;
  background-color: $common_background_color;
}

.sidebar_item {
  height: 52px;
  line-height: 52px;
  color: $sidebar_color;
  display: block;
  font-size: 14px;
  padding-left: 20px;

  > div {
    display: flex;
    align-items: center;
  }

  .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 25px;
    background-size: cover;

    &.home {
      background-image: url("../assets/images/home.png");
    }

    &.cart {
      background-image: url("../assets/images/cart.png");
    }

    &.personal {
      background-image: url("../assets/images/personal.png");
    }
    &.activate {
      background-image: url("../assets/images/activate.png");
    }
    &.cards {
      background-image: url("../assets/images/cards.png");
    }
    &.logout {
      background-image: url("../assets/images/logout.png");
    }

    &.loginout {
      background-image: url("../assets/images/loginout.png");
    }
  }

  &.router-link-active:not(:first-child) {
    color: #1b506e;
    background-color: #1e242c;

    .home {
      background-image: url("../assets/images/home_active.png");
    }

    .cart {
      background-image: url("../assets/images/cart_active.png");
    }

    .personal {
      background-image: url("../assets/images/personal_active.png");
    }

    .loginout {
      background-image: url("../assets/images/loginout_active.png");
    }
  }

  &.router-link-exact-active {
    color: #1b506e;
    background-color: #1e242c;

    .home {
      background-image: url("../assets/images/home_active.png");
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
</style>
